<template>
  <div :id="'echarts_'+id" style="width: 267px;height: 300px;"></div>
</template>

<script>
export default {
  name:'ChangeUseTableEcharts',
  data(){
    return {
      item:[]
    }
  },
  props:{
    data:{
      type:Array,
      default:()=>[]
    },
    id:{
      type:String,
      default:'1'
    },
    name:{
      type:String,
      default:'按投用时间统计'
    }
  },
  mounted(){
    //this.createEcharts()
  },
  methods:{
    createEcharts() {
      let myChart = this.$echarts.init(document.getElementById('echarts_'+this.id), 'dark')
      myChart.setOption({
        title: {
          text: this.name+'总投资（万元）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '项目总投资（万元）',
            type: 'pie',
            radius: '65%',
            data: this.item,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
        backgroundColor:'' //设置无背景色
      })
    },
  },
  watch:{
    data:{
      deep:true,
      handler:function(v){
        this.item = v.map(i=>{
        return {value:i.v2,name:i.key}
      })
        this.createEcharts()
      }
    }
  }
}
</script>

<style>

</style>
